<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>北京科技报</title>
		<link href="css/index.css" rel="stylesheet">
		<link href="css/common.css" rel="stylesheet">
		<link href="css/header.css" rel="stylesheet">
		<link href="css/footer.css" rel="stylesheet">
		<link href="css/bookstarp.css" rel="stylesheet">
		<link href="css/swiper.css" rel="stylesheet">
		<script src="js/swiper.js"></script>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="vue_det" v-on:click="status_type = 1">
			<div class="header-box">
				<div class="header flex align-end">
					<div class="flex-one">
						<img class="header-logo" src="images/logoff.png" />
						<div class="font-12 color-ff">聚焦科学传播 弘扬科学精神</div>
					</div>
					<div class="header-search-btn">
						<img class="header-search" src="images/search.png" />
					</div>
				</div>
				<div class="position-relative">
					<div class="header-status-box">
						<div class="header-status">
							<div class="color-main">首页</div>
							<div class="header-line"></div>
						</div>
						<div class="header-status" v-on:click.stop="status_type = 2">
							<a class="flex align-center">
								<div>要闻</div>
								<img class="header-status-im" v-bind:class="{'header-status-ac':status_type == 2}"
									src="images/down.png" />
							</a>
						</div>
						<div class="header-status" v-on:click.stop="status_type = 3">
							<a class="flex align-center">
								<div>解读</div>
								<img class="header-status-im" v-bind:class="{'header-status-ac':status_type == 3}"
									src="images/down.png" />
							</a>
						</div>
						<div class="header-status" v-on:click.stop="status_type = 4">
							<a class="flex align-center">
								<div>科创</div>
								<img class="header-status-im" v-bind:class="{'header-status-ac':status_type == 4}"
									src="images/down.png" />
							</a>
						</div>
						<div class="header-status" v-on:click.stop="status_type = 5">
							<a class="flex align-center">
								<div>科普</div>
								<img class="header-status-im" v-bind:class="{'header-status-ac':status_type == 5}"
									src="images/down.png" />
							</a>
						</div>
						<div class="header-status" v-on:click.stop="status_type = 6">
							<a class="flex align-center">
								<div>科教</div>
								<img class="header-status-im" v-bind:class="{'header-status-ac':status_type == 6}"
									src="images/down.png" />
							</a>
						</div>
						<div class="header-status">
							<div><a href="">专题</a></div>
						</div>
					</div>

					<!-- 下拉内容 -->
					<div class="header-content-box" v-if="status_type!=1">
						<div class="container">
							<div class="row">
								<div class="col-xs-4 col-sm-3">
									<div class="header-content"><a href="">科研成果</a></div>
								</div>
								<div class="col-xs-4 col-sm-3">
									<div class="header-content"><a href="">科研成果</a></div>
								</div>
								<div class="col-xs-4 col-sm-3">
									<div class="header-content"><a href="">科研成果</a></div>
								</div>
								<div class="col-xs-4 col-sm-3">
									<div class="header-content"><a href="">科研成果</a></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="box margin-top-120">
				<div class="text-box flex align-center">
					<img class="laba-img" src="images/laba.png" />
					<div id='text-word' class="text-word flex-one">
						<div class="marquee-content-one">
							<a id='notice' href=""></a>
						</div>
					</div>
				</div>
				<div class="word-box">
					<div class="font-16 color-main text-center text-bold">科技大力培养创新人才 加快建设科技强国</div>
					<div class="font-13 color-33 text-cut-one margin-top-20">推动设备更新和消费品以旧换新！北京最新政策全文北京最新政策全文</div>
					<div class="font-13 color-33 text-cut-one margin-top-14">推动设备更新和消费品以旧换新！北京最新政策全文北京最新政策全文</div>
					<div class="font-13 color-33 text-cut-one margin-top-14">推动设备更新和消费品以旧换新！北京最新政策全文北京最新政策全文</div>
				</div>
				<div class="swiper-box position-relative">
					<div id='swiper-container' class="swiper-container">
						<div class="swiper-wrapper">
							<div class="swiper-slide"><img class="swiper-img" src="images/app.png"></div>
							<div class="swiper-slide"><img class="swiper-img" src="images/footer1.png"></div>
							<div class="swiper-slide"><img class="swiper-img" src="images/footer5.png"></div>
							<!-- 更多 slide -->
						</div>
					</div>
					<div class="swiper-content-box">
						<div id='swiper-content' class="swiper-content"></div>
					</div>
				</div>
				<div class="margin-top-14">
					<a href="">
						<img class="img-one" src="images/app.png" />
					</a>
				</div>
				<div class="content-box">
					<div class="flex align-center justify-between ">
						<div class="font-17 color-main text-bold">热点解读</div>
						<a class="flex align-center" href="list.html">
							<div class="font-13">更多</div>
							<img class="syou" src="images/syou.png" />
						</a>
					</div>
					<div class="flex flex-wrap justify-between">
						<div class="margin-top-14" style="width: 48%;">
							<a href="">
								<img class="content-sm-img" src="images/app.png" />
								<div class="content-sm-word text-cut-two">提问科学家：争做辟谣小卫前多吃碳水化合物可争做辟谣小卫前多吃碳水化合物可</div>
							</a>
						</div>
						<div class="margin-top-14" style="width: 48%;">
							<a href="">
								<img class="content-sm-img" src="images/app.png" />
								<div class="content-sm-word text-cut-two">提问科学家：争做辟谣小卫前多吃碳水化合物可争做辟谣小卫前多吃碳水化合物可</div>
							</a>
						</div>
						<div class="margin-top-14" style="width: 48%;">
							<a href="">
								<img class="content-sm-img" src="images/app.png" />
								<div class="content-sm-word text-cut-two">提问科学家：争做辟谣小卫前多吃碳水化合物可争做辟谣小卫前多吃碳水化合物可</div>
							</a>
						</div>
					</div>
					<div class="margin-top-14">
						<a href="" class="content-border-word">
							<div class="font-15 text-cut-two">福建国际科创中心十年记 | 这些医药健康领域的新科技，就诞生在中关村</div>
							<div class="font-12 margin-top-8" style="color: #6A6B6B;">
								<span class="margin-right-10">2024/07/12</span>
								<span>科普中央厨房</span>
							</div>
						</a>
					</div>
				</div>
			</div>
			<div class="position-relative padding-lr-12 margin-top-14">
				<div class="new-img flex justify-center align-end">
					<img class="new-img" src="images/app.png" />
					<div>
						<a href="">阅读电子报</a>
					</div>
				</div>
				<img class="taijie-img" src="images/taijie.png" />
			</div>
			<div class="content-box">
					<div class="flex align-center justify-between ">
						<div class="font-17 color-main text-bold">科创</div>
						<a class="flex align-center" href="list.html">
							<div class="font-13">更多</div>
							<img class="syou" src="images/syou.png" />
						</a>
					</div>
					<div class=" margin-top-14">
						<a href="">
							<img class="content-b-img" src="images/app.png" />
						</a>
					</div>
					<div class="margin-top-14">
						<a href="" class="content-border-word">
							<div class="font-15 text-cut-two">福建国际科创中心十年记 | 这些医药健康领域的新科技，就诞生在中关村</div>
							<div class="font-12 margin-top-8" style="color: #6A6B6B;">
								<span class="margin-right-10">2024/07/12</span>
								<span>科普中央厨房</span>
							</div>
						</a>
					</div>
				</div>
			</div>
			<div class="content-box">
					<div class="flex align-center justify-between ">
						<div class="font-17 color-main text-bold">科普</div>
						<a class="flex align-center" href="list.html">
							<div class="font-13">更多</div>
							<img class="syou" src="images/syou.png" />
						</a>
					</div>
					<div class=" margin-top-14">
						<a href="">
							<img class="content-b-img" src="images/app.png" />
						</a>
					</div>
					<div class="margin-top-14">
						<a href="" class="content-border-word">
							<div class="font-15 text-cut-two">福建国际科创中心十年记 | 这些医药健康领域的新科技，就诞生在中关村</div>
							<div class="font-12 margin-top-8" style="color: #6A6B6B;">
								<span class="margin-right-10">2024/07/12</span>
								<span>科普中央厨房</span>
							</div>
						</a>
					</div>
				</div>
			</div>
			<div class="content-box">
					<div class="flex align-center justify-between ">
						<div class="font-17 color-main text-bold">科教</div>
						<a class="flex align-center" href="list.html">
							<div class="font-13">更多</div>
							<img class="syou" src="images/syou.png" />
						</a>
					</div>
					<div class=" margin-top-14">
						<a href="">
							<img class="content-b-img" src="images/app.png" />
						</a>
					</div>
					<div class="margin-top-14">
						<a href="" class="content-border-word">
							<div class="font-15 text-cut-two">福建国际科创中心十年记 | 这些医药健康领域的新科技，就诞生在中关村</div>
							<div class="font-12 margin-top-8" style="color: #6A6B6B;">
								<span class="margin-right-10">2024/07/12</span>
								<span>科普中央厨房</span>
							</div>
						</a>
						<a href="" class="content-border-word">
							<div class="font-15 text-cut-two">福建国际科创中心十年记 | 这些医药健康领域的新科技，就诞生在中关村</div>
							<div class="font-12 margin-top-8" style="color: #6A6B6B;">
								<span class="margin-right-10">2024/07/12</span>
								<span>科普中央厨房</span>
							</div>
						</a>
					</div>
				</div>
			</div>
			<div class="margin-top-14 padding-lr-12">
				<div id='swiper-container-two'  class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<a href="">
								<img class="advert-img" src="images/app.png" alt="" />
							</a>
						</div>
						<div class="swiper-slide">
							<a href="">
								<img class="advert-img" src="images/app.png" alt="" />
							</a>
						</div>
						<!-- 更多 slide -->
					</div>
					<div  class="swiper-pagination"></div>
				</div>
				
			</div>
			<div class="content-box">
					<div class="flex align-center justify-between ">
						<div class="font-17 color-main text-bold">视频</div>
						<a class="flex align-center" href="list.html">
							<div class="font-13">更多</div>
							<img class="syou" src="images/syou.png" />
						</a>
					</div>
					<div class="flex flex-wrap justify-between">
						<div class="margin-top-14" style="width: 48%;">
							<a href="">
								<div class="position-relative">
									<img class="content-sm-img" src="images/app.png" />
									<div class="play-btn">
										<img src="images/play.png" alt="" />
									</div>
								</div>
								<div class="content-sm-word text-cut-two">提问科学家：争做辟谣小卫前多吃碳水化合物可争做辟谣小卫前多吃碳水化合物可</div>
							</a>
						</div>
						<div class="margin-top-14" style="width: 48%;">
							<a href="">
								<div class="position-relative">
									<img class="content-sm-img" src="images/app.png" />
									<div class="play-btn">
										<img src="images/play.png" alt="" />
									</div>
								</div>
								<div class="content-sm-word text-cut-two">提问科学家：争做辟谣小卫前多吃碳水化合物可争做辟谣小卫前多吃碳水化合物可</div>
							</a>
						</div>
						<div class="margin-top-14" style="width: 48%;">
							<a href="">
								<div class="position-relative">
									<img class="content-sm-img" src="images/app.png" />
									<div class="play-btn">
										<img src="images/play.png" alt="" />
									</div>
								</div>
								<div class="content-sm-word text-cut-two">提问科学家：争做辟谣小卫前多吃碳水化合物可争做辟谣小卫前多吃碳水化合物可</div>
							</a>
						</div>
					</div>
				</div>
			</div>
			<div class="content-box">
					<div class="flex align-center justify-between ">
						<div class="font-17 color-main text-bold">直播</div>
						<a class="flex align-center" href="list.html">
							<div class="font-13">更多</div>
							<img class="syou" src="images/syou.png" />
						</a>
					</div>
					<div class=" margin-top-14">
						<a href="">
							<div class="position-relative">
								<img class="content-b-img" src="images/app.png" />
								<div class="play-btn">
									<img src="images/play.png" alt="" />
								</div>
							</div>
						</a>
					</div>
					<div class="flex margin-top-14">
						<div class="ing-box flex align-center justify-center">
							<img src="images/ing.png" />
							<div class="font-12">正在直播</div>
						</div>
					</div>
					<div class="margin-top-14">
						<a href="" class="content-border-word">
							<div class="font-15 text-cut-two">福建国际科创中心十年记 | 这些医药健康领域的新科技，就诞生在中关村</div>
							<div class="font-12 margin-top-8" style="color: #6A6B6B;">
								<span class="margin-right-10">直播时间 2024/07/12</span>
								<span>科普中央厨房</span>
							</div>
						</a>
					</div>
				</div>
			</div>
			<div class="margin-top-14 padding-lr-12">
				<div id='swiper-container-three'  class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<a href="">
								<img class="advert-img" src="images/app.png" alt="" />
							</a>
						</div>
						<div class="swiper-slide">
							<a href="">
								<img class="advert-img" src="images/app.png" alt="" />
							</a>
						</div>
						<!-- 更多 slide -->
					</div>
					<div  class="swiper-pagination"></div>
				</div>
			</div>
			<div class="content-box">
					<div class="flex align-center justify-between ">
						<div class="font-17 color-main text-bold">科技人物</div>
						<a class="flex align-center" href="">
							<div class="font-13">更多</div>
							<img class="syou" src="images/syou.png" />
						</a>
					</div>
					<div class=" margin-top-14">
						<a href="">
							<div class="flex">
								<img class="content-left-img" src="images/app.png" />
								<div class="flex-one flex flex-column justify-between">
									<div class="font-15 text-cut-two margin-top-4">2024年“世界地球日”系列活动之“自然资源科普小讲师”</div>
									<div class="font-12 margin-bottom-4" style="color: #6A6B6B;">
										<span class="margin-right-10">2024/07/12</span>
										<span>科普中央厨房</span>
									</div>
								</div>
							</div>
						</a>
					</div>
					<div class=" margin-top-14">
						<a href="">
							<div class="flex">
								<img class="content-left-img" src="images/app.png" />
								<div class="flex-one flex flex-column justify-between">
									<div class="font-15 text-cut-two margin-top-4">2024年“世界地球日”系列活动之“自然资源科普小讲师”</div>
									<div class="font-12 margin-bottom-4" style="color: #6A6B6B;">
										<span class="margin-right-10">2024/07/12</span>
										<span>科普中央厨房</span>
									</div>
								</div>
							</div>
						</a>
					</div>
					<div class="margin-top-14">
						<a href="" class="content-border-word">
							<div class="font-15 text-cut-two">福建国际科创中心十年记 | 这些医药健康领域的新科技，就诞生在中关村</div>
						</a>
					</div>
				</div>
			</div>
			<div class="content-box">
					<div class="flex align-center justify-between ">
						<div class="font-17 color-main text-bold">图解</div>
						<a class="flex align-center" href="">
							<div class="font-13">更多</div>
							<img class="syou" src="images/syou.png" />
						</a>
					</div>
					<div class=" margin-top-14">
						<a href="">
							<div class="flex">
								<img class="content-left-img" src="images/app.png" />
								<div class="flex-one flex flex-column justify-between">
									<div class="font-15 text-cut-two margin-top-4">2024年“世界地球日”系列活动之“自然资源科普小讲师”</div>
									<div class="font-12 margin-bottom-4" style="color: #6A6B6B;">
										<span class="margin-right-10">2024/07/12</span>
										<span>科普中央厨房</span>
									</div>
								</div>
							</div>
						</a>
					</div>
					<div class=" margin-top-14">
						<a href="">
							<div class="flex">
								<img class="content-left-img" src="images/app.png" />
								<div class="flex-one flex flex-column justify-between">
									<div class="font-15 text-cut-two margin-top-4">2024年“世界地球日”系列活动之“自然资源科普小讲师”</div>
									<div class="font-12 margin-bottom-4" style="color: #6A6B6B;">
										<span class="margin-right-10">2024/07/12</span>
										<span>科普中央厨房</span>
									</div>
								</div>
							</div>
						</a>
					</div>
				</div>
			</div>
			<div class="margin-top-14 padding-lr-12 padding-bottom-12">
				<div id='swiper-container-four'  class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<a href="">
								<img class="advert-img" src="images/app.png" alt="" />
							</a>
						</div>
						<div class="swiper-slide">
							<a href="">
								<img class="advert-img" src="images/app.png" alt="" />
							</a>
						</div>
						<!-- 更多 slide -->
					</div>
					<div  class="swiper-pagination"></div>
				</div>
			</div>
			<div>
				<div class="footer-box">
					<div class="container">
						<div class="footer-top flex justify-between align-center">
							<a class="font-12 color-ff">关于我们</a>
							<div class="shu-line"></div>
							<a class="font-12 color-ff">服务协议</a>
							<div class="shu-line"></div>
							<a class="font-12 color-ff">隐私说明</a>
							<div class="shu-line"></div>
							<a class="font-12 color-ff">联系我们</a>
						</div>
						<div class="text-center color-ff font-12 margin-top-24">
							<div>Powered by 北京科技报</div>
							<div class="margin-top-4">1998-2024 © BK-Media Inc.京ICP备10002591号-5</div>
						</div>
						<div class="text-center color-ff font-12 margin-top-16">
							<div class="flex">
								<div class="flex-one text-right">订阅电话：400 0885 266</div>
								<div class="flex-one text-left margin-left-20">投稿邮箱：kejish@163.com</div>
							</div>
							<div class="margin-top-4">地址：北京朝阳区白家庄东里23号院</div>
						</div>
						<div class="margin-top-14">
							<div class="row">
								<img class="footer-img col-xs-4 col-sm-4" src="images/footer1.png" />
								<img class="footer-img col-xs-4 col-sm-4" src="images/footer2.png" />
								<img class="footer-img col-xs-4 col-sm-4" src="images/footer3.png" />
								<img class="footer-img col-xs-4 col-sm-4" src="images/footer4.png" />
								<img class="footer-img col-xs-4 col-sm-4" src="images/footer5.png" />
								<img class="footer-img col-xs-4 col-sm-4" src="images/footer6.png" />
							</div>
						</div>
					</div>
				</div>
				<div class="downlod-box">
					<div class="container">
						<div class="flex align-center">
							<img class="logo-img" src="images/app.png" />
							<div class="flex-one font-13 margin-lr-6">下载APP客户单体验更多服务</div>
							<div class="but">去下载</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

<script>
	var vm = new Vue({
		el: '#vue_det',
		data: {
			status_type: 1,
			animation_time: 0,
			// notice: '数字经济特征与新质生产力高度一致数字经济特征与新质生产力高度一致'
		},
		mounted: function() {
			// this.animation_time = Number((this.notice.length * 0.2 + 5).toFixed(2))
		},
		methods: {
			
		}
	})
	
	
	var notice = '数字经济特征与新质生产力高度一致数字经济特征与新质生产力高度一致'
	document.getElementById('notice').innerHTML = notice
	document.getElementById('text-word').style.animationDuration = Number((notice.length * 0.2 + 5).toFixed(2)) + 's'
	
	var arr = ['哈哈哈', '666', '嘿嘿嘿']
	var mySwiper = new Swiper('#swiper-container', {
		speed: 600,
		loop: true,
		spaceBetween: 20,
		initialSlide: 0	,
		centeredSlides: true,
		slidesPerView: 1.2,
		 onSlideChangeEnd: function(swiper){
			document.getElementById('swiper-content').innerHTML = arr[swiper.activeIndex - 1]
		 },
	});
	var mySwiperTwo = new Swiper('#swiper-container-two', {
		speed: 600,
		loop: true,
		pagination: '.swiper-pagination',
		paginationClickable: true
	});
	var mySwiperThree = new Swiper('#swiper-container-three', {
		speed: 600,
		loop: true,
		pagination: '.swiper-pagination',
		paginationClickable: true
	});
	var mySwiperFour = new Swiper('#swiper-container-four', {
		speed: 600,
		loop: true,
		pagination: '.swiper-pagination',
		paginationClickable: true
	});
</script>